<template>
  <view class="login-page">
    <!-- 1. 顶部欢迎栏（根据登录状态切换显示） -->
    <view class="top-bar">
      <view class="avatar-area">
        <!-- 已登录：显示用户头像/昵称/退出按钮 -->
        <view v-if="isLogin" class="logged-avatar-wrap">
          <image class="avatar" :src="userInfo.avatar || '/static/logged-avatar.png'"></image>
          <view class="welcome-text">{{ userInfo.nickname || '亲爱的用户' }}</view>
          <button class="logout-btn" @click="handleLogout">退出登录</button>
        </view>
        <!-- 未登录：显示默认头像/登录按钮 -->
        <view v-else class="unlogged-avatar-wrap">
          <image class="avatar" src="/static/fox-avatar.png"></image>
          <view class="welcome-text">HI~欢迎回来</view>
          <button class="login-btn" @click="showLoginModal = true">登录</button>
        </view>
      </view>
      <!-- 关注/话题统计（登录后显示真实数据） -->
      <view class="stats-area" v-if="isLogin">
        <text>关注{{ userInfo.followCount || 3 }}</text>
        <text class="split-line">|</text>
        <text>话题{{ userInfo.topicCount || 0 }}</text>
      </view>
    </view>

    <!-- 2. 功能图标栏（收藏/历史/设置）- 保持不变 -->
    <view class="func-icons">
      <view class="func-item">
        <image src="/static/star-icon.png"></image>
        <text>收藏</text>
      </view>
      <view class="func-item">
        <image src="/static/history-icon.png"></image>
        <text>历史</text>
      </view>
      <view class="func-item">
        <image src="/static/setting-icon.png"></image>
        <text>设置</text>
      </view>
    </view>

    <!-- 3. 广告横幅 - 保持不变 -->
    <view class="ad-banner">
      <image src="/static/ad-img.png"></image>
    </view>

    <!-- 4. 中间发布区域（登录后才可点击） -->
    <view class="publish-area">
      <view class="publish-icons">
        <image src="/static/post-text.png"></image>
        <image src="/static/post-img.png"></image>
        <image src="/static/post-link.png"></image>
      </view>
      <view class="publish-tip">
        <text>已有385,893人</text>
        <text>在这里发布身边的新鲜事</text>
      </view>
      <!-- 发布按钮：未登录时禁用 -->
      <button class="publish-btn" :disabled="!isLogin">
        {{ isLogin ? '我也要发布' : '登录后发布' }}
      </button>
      <text class="go-look">先去逛逛></text>
    </view>

    <!-- 🔴 新增：登录弹窗（账号密码+微信登录） -->
    <uni-popup v-model="showLoginModal" type="center" :mask-click="false">
      <view class="login-modal">
        <view class="modal-title">账号登录</view>
        <!-- 账号输入框 -->
        <view class="input-group">
          <text class="input-label">账号：</text>
          <input 
            type="text" 
            v-model="loginForm.username" 
            placeholder="请输入手机号/用户名"
            class="input-control"
          />
        </view>
        <!-- 密码输入框 -->
        <view class="input-group">
          <text class="input-label">密码：</text>
          <input 
            type="password" 
            v-model="loginForm.password" 
            placeholder="请输入密码"
            class="input-control"
          />
        </view>
        <!-- 登录按钮 -->
        <button class="modal-login-btn" @click="handleAccountLogin">立即登录</button>
        <!-- 分割线 -->
        <view class="split-line-modal">
          <view class="line"></view>
          <text class="line-text">其他登录方式</text>
          <view class="line"></view>
        </view>
        <!-- 微信快捷登录 -->
        <view class="wechat-login" @click="handleWechatLogin">
          <image src="/static/wechat-icon.png" class="wechat-icon"></image>
          <text class="wechat-text">微信快捷登录</text>
        </view>
        <!-- 关闭弹窗 -->
        <view class="modal-close" @click="showLoginModal = false">×</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showLoginModal: false, // 登录弹窗显示控制
      loginForm: { // 登录表单数据
        username: '',
        password: ''
      },
      isLogin: false, // 是否登录（核心状态）
      userInfo: { // 登录后存储的用户信息
        nickname: '', // 昵称
        avatar: '', // 头像
        followCount: 0, // 关注数
        topicCount: 0 // 话题数
      }
    };
  },
  // 页面显示时自动检查登录状态（持久化登录）
  onShow() {
    this.checkLoginStatus();
  },
  methods: {
    /**
     * 1. 检查本地登录状态（页面加载/刷新时触发）
     * 从本地存储获取token和用户信息，存在则视为已登录
     */
    checkLoginStatus() {
      const token = uni.getStorageSync('loginToken');
      const userInfo = uni.getStorageSync('userInfo');
      
      if (token && userInfo) {
        this.isLogin = true;
        this.userInfo = userInfo;
      } else {
        this.isLogin = false;
        this.userInfo = {};
      }
    },

    /**
     * 2. 账号密码登录（核心方法）
     */
    handleAccountLogin() {
      // 第一步：前端表单验证（不能为空）
      if (!this.loginForm.username.trim()) {
        uni.showToast({ title: '请输入账号', icon: 'none', duration: 1500 });
        return;
      }
      if (!this.loginForm.password.trim()) {
        uni.showToast({ title: '请输入密码', icon: 'none', duration: 1500 });
        return;
      }

      // 第二步：调用登录接口（模拟真实后端请求，可直接替换为你的接口）
      uni.request({
        url: 'https://api.example.com/user/login', // 你的真实登录接口地址
        method: 'POST',
        data: {
          username: this.loginForm.username,
          password: this.loginForm.password
        },
        header: {
          'Content-Type': 'application/json'
        },
        // 接口请求成功
        success: (res) => {
          // 假设后端返回格式：{ code: 200, msg: '登录成功', data: { token: 'xxx', userInfo: {} } }
          if (res.data.code === 200) {
            const { token, userInfo } = res.data.data;
            // 存储登录状态到本地（持久化，下次打开APP无需重新登录）
            uni.setStorageSync('loginToken', token);
            uni.setStorageSync('userInfo', userInfo);
            // 更新页面状态
            this.isLogin = true;
            this.userInfo = userInfo;
            this.showLoginModal = false; // 关闭弹窗
            this.loginForm = { username: '', password: '' }; // 清空表单
            uni.showToast({ title: '登录成功', icon: 'success' });
          } else {
            // 登录失败（如账号密码错误）
            uni.showToast({ title: res.data.msg || '登录失败', icon: 'none' });
          }
        },
        // 接口请求失败（无网络/后端故障）- 模拟登录（测试用）
        fail: () => {
          // 注意：真实项目中删除此模拟逻辑，仅保留上面的真实接口请求
          uni.showToast({ title: '模拟登录成功（无后端环境）', icon: 'success' });
          // 模拟存储用户信息
          const mockUserInfo = {
            nickname: '测试用户',
            avatar: '/static/logged-avatar.png',
            followCount: 5,
            topicCount: 2
          };
          uni.setStorageSync('loginToken', 'mock-token-123456');
          uni.setStorageSync('userInfo', mockUserInfo);
          // 更新页面状态
          this.isLogin = true;
          this.userInfo = mockUserInfo;
          this.showLoginModal = false;
          this.loginForm = { username: '', password: '' };
        }
      });
    },

    /**
     * 3. 微信快捷登录（适配小程序/APP）
     */
    handleWechatLogin() {
      // 第一步：获取微信登录临时code（需在微信环境中运行）
      uni.login({
        provider: 'weixin', // 指定登录方式为微信
        success: (wxRes) => {
          const code = wxRes.code; // 微信返回的临时code
          
          // 第二步：将code传给后端，换取token和用户信息
          uni.request({
            url: 'https://api.example.com/user/wechatLogin', // 你的微信登录接口
            method: 'POST',
            data: { code },
            success: (res) => {
              if (res.data.code === 200) {
                const { token, userInfo } = res.data.data;
                // 存储登录状态
                uni.setStorageSync('loginToken', token);
                uni.setStorageSync('userInfo', userInfo);
                // 更新页面状态
                this.isLogin = true;
                this.userInfo = userInfo;
                this.showLoginModal = false;
                uni.showToast({ title: '微信登录成功', icon: 'success' });
              } else {
                uni.showToast({ title: '微信登录失败', icon: 'none' });
              }
            },
            fail: () => {
              uni.showToast({ title: '微信登录接口异常', icon: 'none' });
            }
          });
        },
        // 微信登录授权失败
        fail: () => {
          uni.showToast({ title: '请先安装微信或开启授权', icon: 'none' });
        }
      });
    },

    /**
     * 4. 退出登录
     */
    handleLogout() {
      // 清除本地存储的登录状态
      uni.removeStorageSync('loginToken');
      uni.removeStorageSync('userInfo');
      // 更新页面状态
      this.isLogin = false;
      this.userInfo = {};
      uni.showToast({ title: '退出登录成功', icon: 'success' });
    }
  }
};
</script>

<style scoped>
/* 页面容器 - 保持不变 */
.login-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 1. 顶部欢迎栏样式 - 新增已登录状态适配 */
.top-bar {
  background: linear-gradient(to right, #ff9a9e, #fad0c4);
  padding: 30rpx 20rpx;
  border-radius: 0 0 20rpx 20rpx;
}
.avatar-area {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.welcome-text {
  font-size: 32rpx;
  color: #fff;
  margin-right: 20rpx;
}
/* 未登录按钮样式 - 保持不变 */
.login-btn {
  background-color: #f44336;
  color: #fff;
  border-radius: 20rpx;
  padding: 8rpx 20rpx;
  font-size: 24rpx;
}
/* 已登录退出按钮样式 - 新增 */
.logout-btn {
  background-color: #fff;
  color: #f44336;
  border: 1rpx solid #f44336;
  border-radius: 20rpx;
  padding: 8rpx 20rpx;
  font-size: 24rpx;
}
.stats-area {
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 28rpx;
}
.split-line {
  margin: 0 15rpx;
}

/* 2. 功能图标栏样式 - 保持不变 */
.func-icons {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  background-color: #fff;
  margin: 20rpx;
  border-radius: 10rpx;
}
.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.func-item image {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 10rpx;
}
.func-item text {
  font-size: 24rpx;
  color: #666;
}

/* 3. 广告横幅样式 - 保持不变 */
.ad-banner {
  margin: 0 20rpx;
}
.ad-banner image {
  width: 100%;
  height: 100rpx;
  border-radius: 10rpx;
}

/* 4. 中间发布区域样式 - 保持不变 */
.publish-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50rpx;
}
.publish-icons {
  display: flex;
  justify-content: space-between;
  width: 300rpx;
  margin-bottom: 30rpx;
}
.publish-icons image {
  width: 80rpx;
  height: 80rpx;
  background-color: #f0f0f0;
  border-radius: 15rpx;
  padding: 10rpx;
}
.publish-tip {
  text-align: center;
  margin-bottom: 30rpx;
  color: #666;
}
.publish-btn {
  background-color: #ff5722;
  color: #fff;
  border-radius: 30rpx;
  padding: 10rpx 40rpx;
  margin-bottom: 10rpx;
}
/* 禁用状态的发布按钮样式 - 新增 */
.publish-btn:disabled {
  background-color: #ccc;
  color: #fff;
}
.go-look {
  font-size: 24rpx;
  color: #999;
}

/* 🔴 新增：登录弹窗样式 */
.login-modal {
  width: 650rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  position: relative;
}
.modal-title {
  font-size: 34rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}
.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 15rpx;
}
.input-label {
  font-size: 28rpx;
  color: #333;
  width: 120rpx;
}
.input-control {
  flex: 1;
  font-size: 28rpx;
  padding: 5rpx 0;
}
.modal-login-btn {
  width: 100%;
  background-color: #f44336;
  color: #fff;
  border-radius: 30rpx;
  padding: 15rpx 0;
  font-size: 28rpx;
  margin: 10rpx 0 30rpx;
}
/* 分割线样式 */
.split-line-modal {
  display: flex;
  align-items: center;
  margin: 20rpx 0;
}
.line {
  flex: 1;
  height: 1rpx;
  background-color: #eee;
}
.line-text {
  font-size: 24rpx;
  color: #999;
  padding: 0 20rpx;
}
/* 微信登录样式 */
.wechat-login {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}
.wechat-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 15rpx;
}
.wechat-text {
  font-size: 28rpx;
  color: #42b983; /* 微信绿色 */
}
/* 关闭弹窗按钮 */
.modal-close {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 36rpx;
  color: #999;
  cursor: pointer;
}
</style>